<template>
  <div class="castingManagement">
    <div class="search-bar">
      <el-form
        :inline="true"
        class="search-form"
        ref="test-form"
        label-width="auto"
        size="small"
        style="display: flex; justify-content: space-between"
      >
        <div class="input-row">
          <el-form-item label="denomID:" class="search-form-item">
            <el-input clearable v-model="form.denomId" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="userID:" class="search-form-item">
            <el-input  clearable v-model="form.userId" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="商品名称:" class="search-form-item">
            <el-input  clearable v-model="form.productName" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="审核状态:" class="search-form-item">
            <el-select v-model="form.status" placeholder="状态选择">
              <el-option label="待审核" value="0"></el-option>
              <el-option label="完成" value="1"></el-option>
              <el-option label="驳回" value="2"></el-option>
              <el-option label="审核通过" value="7"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="划转时间">
            <el-date-picker
              v-model="form.tiem"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <div class="default-btn primary-btn" @click="theQuery">搜索</div>
            <div class="default-btn" @click="clearSearch">重置</div>
            <div class="default-btn" @click="verifyBatch">批量审核</div>
          </el-form-item>
        </div>
        <div></div>
      </el-form>
    </div>

    <el-table
      :data="dataList"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="id" label="申请id" width="170" />
      <el-table-column prop="productName" label="商品名称" width="160" />
      <el-table-column prop="denomId" label="denomID" width="180" />
      <el-table-column prop="dawProductCode" label="编码" :show-overflow-tooltip="true" width="100" />
      <el-table-column prop="content" label="tokenId" :show-overflow-tooltip="true" width="200" />
      <el-table-column prop="userName" label="用户" width="100" />
      <el-table-column prop="userId" label="用户ID" width="200" />
      <el-table-column prop="hwjUserId" label="海文交userID" width="100" />
      <el-table-column prop="count" label="划转数量" width="50" />
      <el-table-column prop="isListClick" label="是否点选" width="100" >
        <template scope="scope">
          <div v-if="scope.row.isListClick == 'Y'" style="color: #409eff">是</div>
          <div v-if="scope.row.isListClick == 'N'" style="color: #409eff">否</div>
        </template>
      </el-table-column>
      <el-table-column prop="status " label="审核状态" width="100">
        <template scope="scope">
          <div v-if="scope.row.status == 0" style="color: #409eff">待审核</div>
          <div v-if="scope.row.status == 1" style="color: #409eff">完成</div>
          <div v-if="scope.row.status == 2" style="color: #f56c6c">驳回</div>
          <div v-if="scope.row.status == 7" style="color: #409eff">
            审核通过
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="驳回原因" width="100" />
      <el-table-column prop="createTime" label="申请时间" width="160" />
      <el-table-column prop="updateTime" label="审核时间" width="160" />

      <el-table-column prop="nftPercentage" label="处理进度情况" width="60" />


      <el-table-column prop="" label="操作" width="160" fixed ="right">
        <template scope="scope">
          <div v-if="scope.row.status == 0" style="color: #409eff">
            <el-button
              size="mini"
              type="success"
              @click="agree(dataList[scope.$index], 1)"
              >同意</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="agree(dataList[scope.$index], 2)"
              >驳回</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <!-- 新建品类弹窗 -->


  </div>
</template>

<script>



export default {

  data() {
    return {
      dataList: [],
      applicationDetails: false, //详情弹框
      castingShow: false,
      coinsShow: false,
      applyCoinage: false,
      //返回的参数
      itemInOf: "",
      form: {
        denomId: null,
        productName:null,
        userId: null,
        status: null,
        sceneType: '3',//划转
        tiem: null,
        startTime:null,
        endTime:null
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条,
      },
    };
  },
  mounted() {
    this.getDataList(this.page);
  },
  methods: {
    getDataList(page) {
      this.pageLoading = true
      if(this.form.tiem){
        this.form.startTime =this.form.tiem[0]
        this.form.endTime =this.form.tiem[1]
      }
      this.$http({
        url: this.$http.adornUrl(`/admin/personnftApply/selectListPage`),
        params: this.$http.adornParams(
          Object.assign({
            current: page == null ? this.page.currentPage : page.currentPage,
            size: page == null ? this.page.pageSize : page.pageSize
          },
            this.form
          )
        ),
        method: 'get'
      }).then(({ data }) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    /**
      同意
     */
    agree(e, type) {
      if (type == 1) {
        //同意接口
        this.$confirm("确定要同意操作, 是否继续?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dataApplication(e.id, type);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消同意",
            });
          });
      } else {
        this.$prompt("请输驳回理由", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            this.dataApplicationFail(e.id, type, value);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });


      }
    },
    verifyBatch(){
      this.pageLoading = true
      this.$http({
        url: this.$http.adornUrl(`/admin/personnftApply/changeCeceiptApplyAll`),
        method: "get",
        params: this.$http.adornParams(
          this.form
        ),
      }).then(({ data }) => {
        this.pageLoading = false
        this.getDataList(this.page);
        this.$message({
          type: "success",
          message: "审核完成!",
        });
      });
    },
    //成功接口
    dataApplication(id, type) {
      this.pageLoading = true
      let data = {
        status: type,
        id: id,
      };
      this.$http({
        url: this.$http.adornUrl(`/admin/personnftApply/changeCeceiptApply`),
        method: "post",
        data: data,
      }).then(({ data }) => {
        this.pageLoading = false
        this.getDataList(this.page);
        this.$message({
          type: "success",
          message: "同意成功!",
        });
      });
    },
    //失败
    dataApplicationFail(id, type, content) {
      this.pageLoading = true
      let data = {
        status: type,
        id: id,
        remark: content,
      };
      this.$http({
        url: this.$http.adornUrl(`/admin/personnftApply/changeCeceiptApply`),
        method: "post",
        data: data,
      }).then(({ data }) => {
        this.pageLoading = false
        this.getDataList(this.page);
        this.$message({
          type: "success",
          message: "已驳回",
        });
      });
    },
    /**
     * 打开申请详情弹框
     */
    openFrameApplicationDetails(e) {
      this.itemInOf = e;
      this.applicationDetails = true;
      this.$nextTick(() => {
        this.$refs.applicationDetails.init();
      });
    },

    //刷新当前页面
    refreshChange() {
      this.getDataList(this.page);
    },

    //点击隐藏铸造弹窗
    castingHidden() {
      this.castingShow = false;
    },

    coinsHidden() {
      this.coinsShow = false;
    },

    searchChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.getDataList(this.page)
    },

    /**
     *  重置按钮
     */
    clearSearch() {
      this.form.denomId = null
      this.form.userId = null
      this.form.status = null
      this.form.sceneType = '3'
      this.form.tiem = null
      this.form.productName = null
      this.form.startTime = null
      this.form.endTime = null
      this.getDataList(this.page)
    },

    //查询
    theQuery() {
      this.page.currentPage = 1
      this.page.pageSize=10
      this.getDataList(this.page)
    },

    //点击显示铸造弹窗
    onCasting() {
      this.castingShow = true;
    },

    openApplyCoinage() {
      this.applyCoinage = true;
      this.$nextTick(() => {
        this.$refs.applyCoinage.init();
      });
    },

    //分页按钮
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getDataList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList(this.page);
    },
  },
};
</script>

<style scoped>
.categoryManagement {
  width: 95% !important;
  margin: 30px auto 0;
}
.categoryManagement-table-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px 0;
}
.categoryManagement-table-header div {
  display: flex;
  flex-direction: row;
}
.categoryManagement-table-header div .input {
  margin-right: 15px !important;
}

.categoryManagement >>> .has-gutter tr th .cell {
  text-align: center;
}
.categoryManagement >>> .el-table__row td .cell {
  text-align: center;
}
</style>
